import React, { useEffect, useState } from 'react'
import { request2 } from '../../utils/request'
import { Button, Space, Table, message, Popconfirm, Modal, Form, Input, Tag } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { debounce } from '../../utils/debounce';
function Index() {
  const [list, setList] = useState([])
  const [total, setTotal] = useState(0)
  const [current, setPageNum] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  //博客列表请求
  const getList = async () => {
    const res = await request2.get('/list', {
      params: {
        current: current,
        pageSize: pageSize
      }
    })
    console.log('列表', res)
    if (res.data.code === 10000) {
      //存储数据
      setList(res.data.data.data)
      setTotal(res.data.data.totalCount)
    }

  }
  useEffect(() => {
    getList()
  }, [current, pageSize])

  console.log(total)
  //分页
  const changeNum = (num, size) => {
    setPageNum(num)
    setPageSize(size)
  }

  //二次确认框删除
  const confirm =  debounce(async(id) => {
    console.log(id);
    await request2.delete('/list', { params: { id } }).then(res => {
      message.success('删除成功');
      getList()
    })

  });
  const cancel = (e) => {
    console.log(e);
    message.error('Click on No');
  };

  //下架
  const confirm2 = async (id) => {
    await request2.delete('/list', { params: { id } }).then(res => {
      message.success('下架成功');
      getList()
    })
  }

  //弹框 
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('')
  const [form] = Form.useForm()
  const showModal = () => {
    setIsModalOpen(true);
    setTitle('新增表单')
    form.resetFields() //清空数据
  };
  const handleOk = () => {
    setIsModalOpen(false);
    form.submit() //提交数据
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //编辑按钮 添加防抖效果
  const [id, setBlogID] = useState('')
  const edit = debounce((value) => {
    setIsModalOpen(true);
    setTitle('编辑表单')
    form.setFieldsValue(value)//回显数据 
    setBlogID(value.id) //获取id
  })

  const onFinish = async (values) => {
    console.log(values)
    if (title === '新增表单') {
      //新增接口
      await request2.put('/list', values).then(res => {
        console.log('新增', res)
        message.success('新增成功')
        getList()
      })
    } else {
      //编辑接口
      await request2.post('/list', { ...values, id }).then(res => {
        console.log('编辑', res)
        message.success('编辑成功')
        getList()
      })
    }
  }

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '博客标题',
      dataIndex: 'shopAddress',
      key: 'shopAddress',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '标签',
      dataIndex: 'shopType',
      key: 'shopType',
    },

    {
      title: '标题',
      dataIndex: 'shopDescription',
      key: 'shopDescription',
    },
    {
      title: '名字',
      dataIndex: 'shopName',
      key: 'shopName',
    },
    {
      title: '照片',
      dataIndex: 'shopImage',
      key: 'shopImage',
      render: (text) => {
        <Image src={text} alt="" />
      }
    },

    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => edit(record)}><EditOutlined /></a>
          <Popconfirm
            title="下架任务"
            description="你确定要下架吗?"
            onConfirm={() => confirm2(record.id)}
            onCancel={cancel}
            okText="是的"
            cancelText="取消"
          >
            <Button>下架</Button>
          </Popconfirm>

          <Popconfirm
            title="删除任务"
            description="你确定要删除吗?"
            onConfirm={() => confirm(record.id)}
            onCancel={cancel}
            okText="是的"
            cancelText="取消"
          >
            <a ><DeleteOutlined /></a>
          </Popconfirm>

        </Space>
      ),
    },
  ];

  return (

    <div >

      <Button type="primary" onClick={showModal}>
        新增
      </Button>
      <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{

            wdith: '800px', height: '300px'
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}

          autoComplete="off"
        >
             <Form.Item
            label="博客标题"
            name="shopAddress"

          >
            <Input />
          </Form.Item>
          <Form.Item
            label="标签"
            name="shopType"

          >
            <Input />
          </Form.Item>
          
      

          <Form.Item
            label="标题"
            name="shopDescription"

          >
            <Input />
          </Form.Item>
        

           <Form.Item
            label="名字"
            name="shopName"

          >
            <Input />
          </Form.Item>
       

          <Form.Item
            label="照片"
            name="shopImage"

          >
            <Input />
          </Form.Item>



        </Form>
      </Modal>
      <Table rowKey='id' columns={columns} dataSource={list} pagination={{
        total: total,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `总共 ${total} 条`,
        onChange: { changeNum }
      }} />;

    </div>
  )
}

export default Index
